<!-- Licensed under a BSD license. See license.html for license -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
    <title addtitletodoc="false">WebGL2 - Same Code - Container Partscreen</title>
<style>
html {
  box-sizing: border-box;
  height: 100%;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
    margin: 0;
    height: 100%;
    font-family: Helvetica, Arial, Sans-Serif;
}
/* all canvas elements */
canvas {
    width: 100%;
    height: 100%;
}
/* the container */
#canvas {
    width: 70%;
    height: 100%;
}
#controls {
    background-color:#666;
    color: white;
    padding: 0.5em;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 30%;
    height: 100%;
    font-size: large;
}
</style>
</head>
<body>
<div id="canvas"></div>
<div id="controls">Controls<br/>for<br/>an<br/>Editor<br/>would<br/>go<br/>here</div>
</body>
<!--
This sample uses TWGL (Tiny WebGL) to hide the clutter.
Otherwise the sample would be full of code not related to the point of the sample.
For more info see https://webgl2fundamentals.org/webgl/lessons/webgl-less-code-more-fun.html
-->
<script src="resources/twgl-full.min.js"></script>
<script src="resources/m4.js"></script>
<script src="resources/same-code.js"></script>
</html>


